<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:body>
	<ui:composition template="/template.xhtml">
		<ui:define name="header">
		<title>爱转发</title>
		<style type="text/css">
			.crop_img{
				width: 100%;
				height: 220px;
				background-position: center center;
				background-repeat:no-repeat;
			}
			.comment_bg{
				background-color: #f4f8fa;
				margin: 10px 0px 20px;
				border-left: 3px solid;
				border-color: #bce8f1;
				box-sizing: border-box;
				display: block;
				padding: 5px;
			}
		</style>
		</ui:define>
		<ui:define name="meta">
			<meta name="keywords" content="i转发,爱转发,新鲜事,新奇事,爱心故事,爱心文章,萌宠,动物,搞笑,娱乐" />
			<meta name="description" content="爱转发网站致力于收集全世界范围内的新鲜事,感人事,传递正能量,发现生活中更多的新鲜元素,为广大网友提供一站式分享转发平台" />
		</ui:define>
		<ui:define name="body">
		
			<ui:include src="header.html"></ui:include>
			
			<!-- CONTENT CONTAINER -->
			<div class="container">
			<div class="row">
				<div class="col-xs-12 col-md-8 col-lg-7 col-lg-offset-1">
				<div class="panel panel-default" >
  				<div class="panel-body">
					<c:forEach items="#{storyAction.storyList}" var="data">
						<h2><h:outputText value="#{data.title}"></h:outputText></h2>
						<p>
							<span class="glyphicon glyphicon-calendar"></span>&nbsp;<h:outputText value="#{data.publishDate}"><f:convertDateTime type="date" dateStyle="short" locale="zh" timeZone="GMT+8" pattern="yyyy-MM-dd"></f:convertDateTime></h:outputText>
							<span class="hidden-xs"><span class="glyphicon glyphicon-th-list" style="margin-left: 20px;"></span>&nbsp;<h:outputText value="#{data.categoryName}"></h:outputText></span>
							<span class="glyphicon glyphicon-eye-open" style="margin-left: 20px;"></span>&nbsp;阅读次数：<h:outputText value="#{data.ranking}"></h:outputText> 次
						</p>
						<div class="crop_img img-thumbnail" style="background-image: url(#{data.thumbnailPath});" />
						<div class="comment_bg">
							<h4><h:outputText value="#{data.comment}" style="color: #34789a;"/></h4>
							<p class="text-info text-right" style="margin-right: 5px;">
								<h:link target="_self" outcome="item.faces?id=#{data.id}" styleClass="visible-xs" >阅读全文</h:link>
								<h:link target="_blank" outcome="item.faces?id=#{data.id}" styleClass="hidden-xs" >阅读全文</h:link>
							</p>
						</div>
						<hr></hr>
					</c:forEach>
					<!-- PAGING REGION -->
					<h:form
						rendered="#{not empty storyAction.storyList}">
						<div class="text-center hidden-xs">
							<ul class="pagination pagination-lg">
								
								<li class="#{pageObject.hasPrePageGroup ? '' : 'disabled'}">
									<h:commandLink action="#{storyAction.loadPrePage}">
										<span class="glyphicon glyphicon glyphicon-chevron-left"></span> 上一页
										<f:param name="p" value="#{pageObject.listPageNo.get(0) - 1}" />
				            		</h:commandLink>
				            	</li>
	
								<c:forEach items="#{pageObject.listPageNo}" var="pageNoList">
									<li class="#{pageObject.currentPageNumber == pageNoList ? 'active' : ''}">
										<h:link outcome="/articles.faces?p=#{pageNoList}" value="#{pageNoList}" ></h:link>
									</li>
								</c:forEach>
	
								<li class="#{pageObject.hasNextPageGroup ? '' : 'disabled'}">
									<h:commandLink action="#{storyAction.loadNextPage}">
				              			下一页 <span class="glyphicon glyphicon glyphicon-chevron-right"></span>
				              			<f:param name="p" value="#{pageObject.listPageNo.get(pageObject.listPageNo.size() - 1) + 1}" />
									</h:commandLink>
								</li>
							</ul>
						</div>
						<div class="text-center visible-xs">
							<ul class="pagination">
								<li class="#{pageObject.hasPrePageGroup ? '' : 'disabled'}">
									<h:commandLink action="#{storyAction.loadPrePage}">
										&larr;<f:param name="p" value="#{pageObject.listPageNo.get(0) - 1}" />
				            		</h:commandLink>
				            	</li>
								<c:forEach items="#{pageObject.listPageNo}" var="pageNoList">
									<li class="#{pageObject.currentPageNumber == pageNoList ? 'active' : ''}">
										<h:link outcome="/articles.faces?p=#{pageNoList}" value="#{pageNoList}" ></h:link>
									</li>
								</c:forEach>
								<li class="#{pageObject.hasNextPageGroup ? '' : 'disabled'}">
									<h:commandLink action="#{storyAction.loadNextPage}">
				              			&rarr;<f:param name="p" value="#{pageObject.listPageNo.get(pageObject.listPageNo.size() - 1) + 1}" />
									</h:commandLink>
								</li>
							</ul>
						</div>
					</h:form>
  				
  				</div>
  				</div>
				</div>
				
				<ui:include src="most_read.xhtml"></ui:include>
			</div>
			</div>
			
			<ui:insert>
        		<ui:include src="footer.html" />
        	</ui:insert>
        	
		</ui:define>
		<ui:define name="insert-js-at-the-end">
			<script>
				$("img.lazy").lazyload({failure_limit : 50,threshold : 200,effect : "fadeIn"});
			</script>
		</ui:define>
	</ui:composition>
</h:body>
</html>